import React, {useState} from 'react';
import {Modal,message} from 'antd'
import SelectSize from "@/pages/Home/component/common/SelectSize";

const ChooseSizeDialog = (props: any) => {
  const [messageApi, contextHolder] = message.useMessage();
  const [size, setSize] = useState('')

  const getSize = (size: string) => {
    setSize(() => size)
  }

  const handleCancel = () => {
    setSize(() => '')
    props.setSelectSize(false, '')
  }
  const handleOk = () => {
    if (!size) {
      messageApi.open({
        type: 'warning',
        content: 'Please choose a size',
        duration: 2,
        className: 'custom-class',
        style: {
          marginTop: '20vh'
        },
      });
      return
    }
    props.setSelectSize(false, size)
    setSize(() => '')
  }

  return (
    <>
      {contextHolder}
      <Modal
        title="Select size"
        style={{
          width: '100%',
          cursor: 'move',
        }}
        maskClosable={false}
        open={props.open}
        onOk={handleOk}
        onCancel={handleCancel}
      >
        <div>
          <SelectSize size={size} getSize={getSize}/>
        </div>
      </Modal>
    </>
  );
}
export default ChooseSizeDialog;
